/* pages/device/info/channal/index.wxss */
.channalPage {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.iconList {
    padding: 76rpx 0;
    display: flex;

    .item {
        width: 25%;
        display: flex;
        justify-content: center;

        .icon {
            display: flex;
            flex-direction: column;
            text-align: center;
            font-size: 24rpx;
            color: #343a40;
            gap: 14rpx;

            .iconfont {
                font-size: 52rpx;
            }
        }
    }
}

.remote {
    padding: 24rpx;

    .panal {
        height: 480rpx;
        width: 480rpx;
        position: relative;
        margin: 0 auto;
        background: #edeef0;
        border-radius: 50%;
        overflow: hidden;

        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 120rpx;
            height: 120rpx;
            background: #fff;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            border: #b7b9bd 40rpx solid;
        }

        .controls {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            transform: rotate(45deg);

            .ctrlButton {
                width: 50%;
                height: 50%;
                position: relative;

                .iconfont {
                    position: absolute;
                    left: calc(50% - 20rpx);
                    top: calc(50% - 20rpx);
                    font-size: 40rpx;
                    width: 40rpx;
                    height: 40rpx;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    color: #b7b9bd;
                    transform: rotate(-45deg);
                }


                &.button3 {
                    .iconfont {
                        transform: rotate(-135deg);
                    }
                }

                &.button2 {
                    .iconfont {
                        transform: rotate(45deg);
                    }
                }

                &.button4 {
                    .iconfont {
                        transform: rotate(135deg);
                    }
                }

                &:active {
                    background: rgba(0, 0, 0, .05);
                }

            }
        }
    }
}

.pageTitle {
    display: flex;
    justify-content: space-between;
    font-size: 20rpx;
    color: #8b8c8f;

    .left {
        display: flex;
        gap: 20rpx;
        line-height: 32rpx;
    }

    .title {
        font-size: 32rpx;
        color: #000;
        font-weight: 600;
    }

    .iconfont {
        position: relative;
        top: 2rpx;
    }
}